<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理想国真惠玩</title>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
</head>
<body>
<!--进度条: 最小值10,最大值100-->
<progress id="js-progressbar" class="uk-progress" value="10" max="100"></progress>


<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
<script>
    UIkit.util.ready(function () {//文档就绪事件
        //获取进度条
        var bar = document.getElementById('js-progressbar');
        //定时动画: 1秒执行一次
        var animate = setInterval(function () {
            bar.value += 10;//每次+10
            if (bar.value >= bar.max) {//当值大于等于最大值是
                clearInterval(animate);//清除动画
            }
        }, 1000);
    });
</script>
</body>
</html>